<template>
  <div class="task_details">
    <div class="task_header">
      <div>
        <i class="el-icon-edit-outline"></i>{{ $t("routes.taskProcessing") }}
      </div>
    </div>
    <div class="task_content">
      <el-form
        ref="form"
        size="small"
        :model="form"
        label-width="80px"
        :rules="rules"
      >
        <el-row gutter="30">
          <el-col :xl="24">
            <div class="task_form_header">
              <div>
                {{ $t("flowTask.basicInfo") }}
              </div>
            </div>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.leavePeople')"
            >
              <el-input
                @click="dialogSelect = !dialogSelect"
                readonly
                :placeholder="$t('flowDefine.placeholder.flowType')"
              >
                <template #suffix>
                  <i class="el-icon-search el-input__icon"> </i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.belongsDepartment')"
            >
              <el-input
                @click="dialogSelect = !dialogSelect"
                readonly
                :placeholder="$t('flowDefine.placeholder.flowType')"
              >
                <template #suffix>
                  <i class="el-icon-search el-input__icon"> </i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              prop="flowName"
              label-width="40%"
              :label="$t('flowTask.detailsForm.createTime')"
            >
              <el-date-picker type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.endTime')"
            >
              <el-date-picker type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.vacationDays')"
            >
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.vacationType')"
            >
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="22">
            <el-form-item
              label-width="19.5%"
              :label="$t('flowTask.detailsForm.whyAskForLeave')"
            >
              <el-input type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="22">
            <el-form-item
              label-width="19.5%"
              :label="$t('flowTask.detailsForm.approvalOpinions')"
            >
              <el-input type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="24">
            <div class="task_form_header">
              <div>
                {{ $t("flowTask.nextFlowInfo") }}
              </div>
            </div>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.requiredCompletionTime')"
            >
              <el-input
                @click="dialogSelect = !dialogSelect"
                readonly
                :placeholder="$t('flowDefine.placeholder.flowType')"
              >
                <template #suffix>
                  <i class="el-icon-search el-input__icon"> </i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.taskPriority')"
            >
              <el-input
                @click="dialogSelect = !dialogSelect"
                readonly
                :placeholder="$t('flowDefine.placeholder.flowType')"
              >
                <template #suffix>
                  <i class="el-icon-search el-input__icon"> </i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="22">
            <el-form-item
              label-width="19.5%"
              :label="$t('flowTask.detailsForm.nextProcessor')"
            >
              <el-input type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="24" :offset="4">
            <el-form-item :label-width="'0px'">
              <el-button type="primary" @click="currentChange">
                {{ $t("routes.flowTracking") }}</el-button
              >
              <el-button @click="changeKey">
                {{ $t("common.close") }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog
      :title="$t('flowDefine.classification')"
      width="400px"
      destroy-on-close
      v-model="dialogSelect"
    >
      <SelectTree
        :flow="form"
        :treeData="treeData"
        @submit="setFlowType"
        @down="dialogSelect = !dialogSelect"
      />
    </el-dialog>
  </div>
</template>
<script>
import SelectTree from "../../defineManagement/main/components/selectTree.vue";
import { mapState,mapMutations } from "vuex";
export default {
  components: {
    SelectTree,
  },
  data() {
    return {
      dialogSelect: false,
      treeData:[],
      form:{}
    };
  },

  computed: {
   
    ...mapState({ form: (state) => state.flowTaskStore.detailsForm }),
  },

  // mounted() {},

  methods: {
      ...mapMutations("flowTaskStore", ["changeKey"]),
    setFlowType(){
      console.log();
    }
  },
};
</script>
<style lang='scss' scoped>
.task_details {
  height: calc(100% - 54px);
  .task_header {
    border-bottom: 1px solid #eee;
    height: 40px;
    width: 100%;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    & i {
      color: #3e70dd;
      padding: 0 5px;
    }
  }
  .task_form_header {
    border-bottom: 1px solid #eee;
    height: 30px;
    width: 100%;
    line-height: 30px;
    color: #3065db;
    margin-bottom: 20px;
  }
  .task_content {
    height: calc(100% - 40px);
    width: 100%;
    padding: 10px;
  }
}
</style>